﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>资产信息管理</title>
    <link href="~/Scripts/layui/css/layui.css" rel="stylesheet">
    <style>
        /* 基础样式清零 - 确保根元素无默认间距 */
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            min-width: 100%;
            background-color: #f2f2f2;
            overflow-x: hidden; /* 防止横向滚动条 */
        }

        /* 主容器样式 - 完全铺满宽度 */
        .layui-fluid {
            padding: 10px 0 !important; /* 去除左右内边距 */
            margin: 0 !important;
            width: 100% !important;
            max-width: none !important; /* 取消最大宽度限制 */
        }

        /* 搜索表单区域 - 铺满宽度 */
        .search-form {
            background: white;
            padding: 10px 15px; /* 仅保留上下内边距 */
            margin: 0 !important; /* 去除默认外边距 */
            border-radius: 0; /* 取消圆角更适合全屏 */
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            width: 100% !important;
        }

        /* 表格容器 - 完全铺满 */
        .table-container {
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        /* 强制表格占满宽度 */
        .layui-table-view {
            width: 100% !important;
            margin: 0 !important;
            border: none !important;
            border-radius: 0 !important;
        }

        .layui-table-box {
            width: 100% !important;
        }

        .layui-table {
            width: 100% !important;
            border-left: none !important;
            border-right: none !important;
        }

        /* 调整表单元素布局 */
        .layui-form-item {
            margin-bottom: 10px;
        }

        /* 消除栅格系统的间距影响 */
        .layui-row {
            margin: 0 !important;
        }

        .layui-col-space16 {
            margin: 0 !important;
        }

            .layui-col-space16 > [lay-col] {
                padding: 0 8px;
            }

        /* 分页区域样式调整 */
        .layui-table-page {
            padding: 10px 15px !important;
        }
    </style>
</head>
<body>
    <!-- 使用layui-fluid作为主容器 -->
    <div class="layui-fluid">
        <!-- 搜索表单 -->
        <div class="search-form layui-form layui-row layui-col-space16" lay-filter="search-form">
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">资产名称：</label>
                    <div class="layui-input-block">
                        <input type="text" id="txtAssetName" name="assetName" placeholder="请输入资产名称" class="layui-input" lay-affix="clear">
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">资产类别：</label>
                    <div class="layui-input-block">
                        <select id="selAssetType" name="strAssetTypeID">
                            <option value="">请选择资产类别</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">&nbsp;</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="btnSearch">搜索</button>
                        <button type="button" id="btnAdd" class="layui-btn layui-btn-primary">添加</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 表格容器 -->
        <div class="table-container">
            <table class="layui-hide" id="tblData" lay-filter="AssetTable"></table>
        </div>
    </div>

    <!-- 添加/编辑表单 (保持不变) -->
    <div id="divInfo" style="display: none;">
        <div style="padding:16px;">
            <form class="layui-form" action="" lay-filter="assetForm">
                <input type="hidden" name="AssetID" id="hidAssetID" value="0">
                <div class="layui-form-item">
                    <label class="layui-form-label">资产名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="AssetName" lay-verify="required|NameExist" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">资产类别</label>
                    <div class="layui-input-block">
                        <select name="AssetTypeID" lay-verify="required">
                            <option value="">请选择资产类别</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">资产型号</label>
                    <div class="layui-input-block">
                        <input type="text" name="AssetModel" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">单位</label>
                    <div class="layui-input-block">
                        <input type="text" name="AssetCompany" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" name="AssetReMark" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="submitBtn">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="~/Scripts/layui/layui.js"></script>

    <!-- 操作列模板 -->
    <script type="text/html" id="toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;

            // 初始化下拉框
            BindSelect();

            // 表格渲染 - 调整列宽使其更适合全屏显示
            var tableIns = table.render({
                elem: "#tblData",
                id: "myTable",
                url: "/AssetInfo/GetData",
                cols: [[
                    { type: 'radio', title: '选择', width: 60, fixed: 'left' },
                    { field: 'AssetId', title: 'ID', width: 80, sort: true },
                    { field: 'AssetName', title: '资产名称', minWidth: 150 }, // 使用minWidth更灵活
                    { field: 'AssetTypeName', title: '资产类别', minWidth: 120 },
                    { field: 'AssetModel', title: '资产型号', minWidth: 150 },
                    { field: 'AssetCompany', title: '单位', width: 80 },
                    { field: 'AssetReMark', title: '备注', minWidth: 200, flex: 1 }, // 让备注列自适应剩余空间
                    {
                        fixed: 'right',
                        title: '操作',
                        width: 120,
                        toolbar: '#toolbar'
                    }
                ]],
                page: true,
                limit: 5,
                limits: [5, 10, 20, 50, 100],
                initSort: {
                    field: 'AssetId',
                    type: 'desc'
                },
                done: function () {
                    // 确保表格容器无额外间距
                    $('.layui-table-view').css({
                        'border-left': 'none',
                        'border-right': 'none'
                    });
                }
            });

            // 搜索按钮事件
            $("#btnSearch").click(function () {
                TableReload();
            });

            // 添加按钮事件
            $("#btnAdd").click(function () {
                form.val('assetForm', {
                    "AssetID": "0",
                    "AssetName": "",
                    "AssetTypeID": "",
                    "AssetModel": "",
                    "AssetCompany": "",
                    "AssetReMark": ""
                });
                form.render('select');
                index = layer.open({
                    type: 1,
                    title: '添加资产',
                    area: ['600px', '500px'],
                    content: $("#divInfo")
                });
            });

            // 自定义验证规则
            form.verify({
                NameExist: function (value, elem) {
                    var res = false;
                    var assetId = $("#hidAssetID").val();
                    $.ajax({
                        type: "GET",
                        async: false,
                        url: "/AssetInfo/Exist",
                        data: { name: value, id: assetId },
                        success: function (result) { res = result; },
                        error: function () { res = "false"; }
                    });
                    if (res == "true") {
                        return "资产名称重复，请重新输入";
                    }
                }
            });

            // 表单提交事件
            form.on("submit(submitBtn)", function (data) {
                var loadIndex = layer.load(2);
                $.ajax({
                    type: "POST",
                    url: "/AssetInfo/Save",
                    data: data.field,
                    dataType: "json",
                    success: function (result) {
                        layer.close(loadIndex);
                        if (result && result.code === 0) {
                            layer.msg(result.msg, { icon: 1, time: 1500 }, function () {
                                layer.close(index);
                                TableReloadWithNewFirst();
                            });
                        } else {
                            layer.msg(result.msg || "操作失败", { icon: 2 });
                        }
                    },
                    error: function (xhr, status, error) {
                        layer.close(loadIndex);
                        layer.msg("请求失败: " + error, { icon: 2 });
                    }
                });
                return false;
            });

            // 表格工具条事件
            table.on('tool(AssetTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    form.val('assetForm', {
                        "AssetID": data.AssetID || "0",
                        "AssetName": data.AssetName || "",
                        "AssetTypeID": data.AssetTypeID || "",
                        "AssetModel": data.AssetModel || "",
                        "AssetCompany": data.AssetCompany || "",
                        "AssetReMark": data.AssetReMark || ""
                    });
                    form.render();
                    index = layer.open({
                        type: 1,
                        title: '编辑资产 - ID: ' + data.AssetId,
                        area: ['600px', '500px'],
                        content: $("#divInfo")
                    });
                } else if (obj.event === 'del') {
                    layer.confirm('确定要删除【' + data.AssetName + '】这条数据吗？', function (confirmIndex) {
                        $.ajax({
                            type: "POST",
                            url: "/AssetInfo/Delete",
                            data: { id: data.AssetID },
                            dataType: "json",
                            success: function (result) {
                                if (result && result.code === 0) {
                                    layer.msg(result.msg, { icon: 1 });
                                    TableReload();
                                } else {
                                    layer.msg(result.msg || "删除失败", { icon: 2 });
                                }
                            },
                            error: function (xhr, status, error) {
                                layer.msg("删除请求失败: " + error, { icon: 2 });
                            }
                        });
                        layer.close(confirmIndex);
                    });
                }
            });

            // 下拉列表绑定函数
            function BindSelect() {
                $.ajax({
                    type: "GET",
                    url: "/AssetTypeInfo/GetALLData",
                    dataType: "json",
                    success: function (result) {
                        var strHtml = '<option value="">请选择资产类别</option>';
                        if (result && result.length > 0) {
                            for (var i = 0; i < result.length; i++) {
                                strHtml += '<option value="' + result[i].AssetTypeID + '">' + result[i].AssetTypeName + '</option>';
                            }
                        }
                        $("#selAssetType").html(strHtml);
                        $("select[name='AssetTypeID']").html(strHtml);
                        form.render('select');
                    },
                    error: function () {
                        layer.msg("加载资产类别失败");
                    }
                });
            }

            function TableReloadWithNewFirst() {
                table.reload('myTable', {
                    where: { strAssetName: $("#txtAssetName").val(), strAssetTypeID: $("#selAssetType").val() },
                    page: { curr: 1 },
                    initSort: { field: 'AssetId', type: 'desc' }
                });
            }

            function TableReload() {
                table.reload('myTable', {
                    where: { strAssetName: $("#txtAssetName").val(), strAssetTypeID: $("#selAssetType").val() },
                    page: { curr: 1 }
                });
            }
        });
    </script>
</body>
</html>